.df-btn:not(.df-closed) {
    border-radius: 16px !important;
}

.df-btn {
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    font-family: 'Roboto','Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-radius: 24px !important;
    transition: all 2s linear !important;
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10005 !important;
    align-items: flex-start !important;
    line-height: 1 !important;
}

.df-btn:hover {
    outline: none !important;
}

.df-closed > .df-btn-content {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.df-btn-content {
    display: block !important;
    border: 0 !important;
    width: 350px !important;
    transition: all .25s ease !important;
    float: right !important;
    opacity: 1 !important;
    margin-bottom: 25px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 0.428571rem 0px !important;
    background-color: #e5ddd5;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
}


.df-content-topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #0A5F54;
    min-height: 50px !important;
    border-radius: 12px 12px 0px 0px !important;
    box-sizing: border-box !important;
    padding: 20px 15px !important;
    display: flex !important;
    align-items: center !important;
}

.df-content-topbar .df-brand-img {
    height: 40px !important;
    width: 40px !important;
    border-radius: 50% !important;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 0.428571rem 0px !important;
    margin-right: 8px !important;
}

.df-content-topbar .df-brand-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

.df-content-topbar .df-brand-sub {
    color: white !important;
    font-size: 12px !important;
}

.df-content-window {
    width: 100% !important;
    min-height: 140px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.df-content-bottombar {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: white !important;
    min-height: 70px !important;
    border-radius: 0px 0px 12px 12px !important;
    box-sizing: border-box !important;
    padding: 20px 25px 10px 25px !important;
}


.df-btn-text-icon-only > .df-btn-text {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.df-btn-text {
    border-radius: 24px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: "center" !important;
    font-weight: 500 !important;
    letter-spacing: .25px !important;
    transition: all .08s linear !important;
    cursor: pointer !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 16px !important;
    margin-top: 15px !important;
    background-color: #4dc247;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 0.428571rem 0px !important;
}

.df-btn-text:hover {
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149) !important;
}

.df-window-msg-cont {
    width: 75% !important;
    margin: 15px !important;
    background: white !important;
    display: inline-block !important;
    padding: 10px 15px !important;
    border-radius: 0px 8px 8px 8px !important;
    font-size: 14px !important;
    position: relative !important;
}

.df-window-msg-cont-brandname {
    color: #848484 !important;
    font-weight: 500 !important;
}

.df-window-msg {
    color: black !important;
    margin-top: 6px !important;
    white-space: pre-wrap !important;
    min-width: 160px !important;
    max-width: 250px !important;
    font-family: Roboto !important;
    margin-bottom: 0px !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

.df-window-msg-cont:before {
    content: '' !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    margin-left: -8px !important;
    width: 0 !important;
    height: 0 !important;
    border-bottom: solid 10px transparent !important;
    border-right: solid 8px white !important;
}

.df-bottombar-btn {
    width: 100% !important;
    padding: 10px 0px !important;
    border-radius: 50px !important;
    background-color: #4dc247;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
    cursor: pointer !important;
}

.df-bottombar-branding {
    font-size: 12px !important;
    color: grey !important;
    text-align: center !important;
    margin-top: 8px !important;
}

.df-emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

.df-bottombar-branding a {
    color: #08cf65 !important;
}

svg:not(:root) {
    overflow: hidden;
}

.df-svg-icon {
    height: 40px !important;
    width: 40px !important;
    fill: white !important;
}

.df-cancel-svg-icon {
    height: 12px !important;
    width: 12px !important;
    fill: lightgrey !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    margin-bottom: 15px !important;
}